import React, { useEffect, useState, useRef } from 'react'
import ReactDOM from 'react-dom'

import { Input } from 'antd'
import 'antd/dist/antd.css'
import "@/icons/";
import PowerfulModal from '@/components/PowerfulModal'

import { AliveScope } from 'react-activation'

const App = (props) => {
  // useEffect(() => {
  //   actions.setFieldState('name', state => {
  //     state.visible = true
  //   })
  // }, [])
  const [count, setCount] = useState(1)
  const [data, setData] = useState<any>({value: "1", change: 2})
  const [zoomOut, setZoomOut] = useState<boolean>(false)
  const imgRef = useRef(null)
  const closeImg = () => {
    setZoomOut(false)
  }
  return (
    <AliveScope>
    <div ref={imgRef} style={{display: 'inline-block'}} onClick={() => setZoomOut(true)}>
      点击放大图片
      <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639538057&t=9bb2cdab8d36bb402f9c56b7bfd95638" />
    </div>
    <PowerfulModal
          getContainer={() => imgRef.current || document.body}
          visible={zoomOut}
          handleClose={closeImg}
        >
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639538057&t=9bb2cdab8d36bb402f9c56b7bfd95638" />
        </PowerfulModal>
    </AliveScope>
  )
}
export default App;
